<template>
    <div style="width: 100%;">
        <el-form ref="addHouseInformation" size="mini" :inline="true" :rules="rules.addHouseInformation" :model="addHouseInformation" class="demo-form-inline">
            <el-form-item label="编号" prop="code">
                <el-input v-model="addHouseInformation.code" placeholder="请输入编号" maxlength="20"></el-input>
            </el-form-item>
            <el-form-item label="住房人姓名" prop="name">
                <el-input v-model="addHouseInformation.name" placeholder="住房人姓名" maxlength="6"></el-input>
            </el-form-item>
            <el-form-item label="身份证号码" prop="sfz">
                <el-input v-model="addHouseInformation.sfz" placeholder="住房人身份证" maxlength="18"></el-input>
            </el-form-item>
            <el-form-item label="开具证明时间" prop="proveDatetime">
                <el-date-picker
                    v-model="addHouseInformation.proveDatetime"
                    type='datetime'
                    value-format='yyyy-MM-dd HH:mm:ss'
                    placeholder="开具证明时间"
                    :default-value='new Date()'
                    :picker-options="pickerOptions.addHouseInformation">
                </el-date-picker>
            </el-form-item>
        </el-form>
        <el-button type="primary" size="mini" plain style="margin-bottom: 10px;" @click="addHouseRowHandle">新增行</el-button>
        <el-table :data="arrayManagement.houseArray.data" border style="width: 100%;" size="mini" max-height="300">
            <el-table-column type="index" width="50" :index="rowIndexHandle" fixed="left" align="center" label="序号"></el-table-column>
            <el-table-column prop="housePosition" label="房屋坐落位置" width="200" align="center">
                <template slot-scope="scope">
                    <el-input size="mini" v-model="scope.row.housePosition" placeholder="房屋坐落位置"></el-input>
                </template>
            </el-table-column>
            <el-table-column prop="architectureArea" label="建筑面积" width="160" align="center">
                <template slot-scope="scope">
                    <el-input size="mini" v-model="scope.row.architectureArea" placeholder="建筑面积"></el-input>
                </template>
            </el-table-column>
            <el-table-column prop="recordNumber" label="权证号/备案号" width="180" align="center">
                <template slot-scope="scope">
                    <el-input size="mini" v-model="scope.row.recordNumber" placeholder="权证号/备案号"></el-input>
                </template>
            </el-table-column>
            <el-table-column prop="state" label="登记状况" width="180" align="center">
                <template slot-scope="scope">
                    <el-input size="mini" v-model="scope.row.state" placeholder="登记状况"></el-input>
                </template>
            </el-table-column>
            <el-table-column prop="type" label="登记类型" width="180" align="center">
                <template slot-scope="scope">
                    <el-input size="mini" v-model="scope.row.type" placeholder="登记类型"></el-input>
                </template>
            </el-table-column>
            <el-table-column prop="type" label="登记日期" width="200" align="center">
                <template slot-scope="scope">
                    <el-date-picker
                        v-model="scope.row.registerDatetime"
                        type='date'
                        value-format='yyyy-MM-dd'
                        placeholder="登记日期"
                        :default-value='new Date()'
                        :picker-options="pickerOptions.addHouseInformation">
                    </el-date-picker>
                </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="120" align="center">
                <template slot-scope="scope">
                    <el-button type="danger" size="small" @click="deleteHouseRecordHandle(scope.$index)">移除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div style="text-align: center; margin-top: 30px;">
            <el-button type="primary" round @click="registerHouseInformationHandle" :loading="loading.addHouseInformation">登 记 录 入</el-button>
        </div>
    </div>
</template>

<script>
import { checkHouseInformationCode, addHouseInformation } from '@/api/house/index'
export default {
    name: 'editHouseInformation',
    props:{

    },
    mounted() {
      this.addHouseInformation.proveDatetime = this.$util.fetchCurrentTime()
    },
    watch: {
        'arrayManagement.houseArray.data': {
            handler: function(){
                let data = this.arrayManagement.houseArray.data
                for(let index in data){
                    data[index].sort = (parseInt(index) + 1)
                }
            }
        }
    },
    data() {
        const checkHouseInformationCodeRule = (rule,value,callback) => {
            checkHouseInformationCode({code: value}).then(res => {
                if(res.data == 0){
                    callback()
                }else{
                    callback(new Error("该编码已存在，请更换编码"))
                }

            }).catch(() => {
                callback(new Error("当前网络异常，请稍后重试"))
            })
        };
        return {
            loading: {
                addHouseInformation:false
            },
            addHouseInformation: {
                code: '',
                name: '',
                sfz: '',
                proveDatetime: ''
            },
            arrayManagement: {
                houseArray: {
                    data: []
                }
            },
            rules: {
                addHouseInformation: {
                    code: [{required: true, message: '请输入编号',trigger: 'blur'},
                           {validator: checkHouseInformationCodeRule, trigger: 'blur'}],
                    name: [{required: true, message: '请输入住房人姓名',trigger: 'blur'}],
                    sfz: [
                         {required: true, message: '请输入住房人身份证号码',trigger: 'blur'},
                         {pattern: /^([1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx])|([1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2})$/, message: '请正确输入身份证号',trigger: 'blur'}
                        ],
                    proveDatetime: [{required: true, message: '请选择证明开具时间',trigger: 'blur'}]
                }
            },
            pickerOptions: {
                addHouseInformation: {
                    disabledDate(time) {
                        return time.getTime() > Date.now();
                    }
                }
            }
        }
    },
    methods: {
        rowIndexHandle(i) {
            return i + 1
        },
        addHouseRowHandle() {
            let data = this.arrayManagement.houseArray.data
            let index = 0
            for(let item of data){
                if(item.housePosition.trim() === ''){
                    this.$message.warning('请先完整填写表格内已存在内容再进行新增行操作。错误行定位：【' + (index + 1) + '】')
                    return
                }
                index++
            }
            let registerDatetime = this.$util.fetchCurrentTime(new Date(),'DATE')
            data.push({
                housePosition: '',
                state: '',
                type: '',
                architectureArea: '',
                recordNumber: '',
                sort: 0,
                registerDatetime
            })
        },
        deleteHouseRecordHandle(index) {
            let data = this.arrayManagement.houseArray.data
            data.splice(index,1)
        },
        registerHouseInformationHandle(){
            this.loading.addHouseInformation = true
            let data = this.arrayManagement.houseArray.data
            console.log('registerHouseInformationHandle:' + JSON.stringify(data))
            this.$refs.addHouseInformation.validate(res => {
                if ( res && this.checkHouseDetail('请先完整填写表格内已存在内容再进行提交操作。')) {
                    let houseInformation = this.addHouseInformation
                    let houseInformationDetails = this.arrayManagement.houseArray.data
                    houseInformationDetails = JSON.parse(JSON.stringify(houseInformationDetails))
                    for(let houseInformationDetail of houseInformationDetails){
                        houseInformationDetail.proveDatetime = this.$util.fetchCurrentTime(houseInformationDetail.proveDatetime)
                    }
                    let submitStructural = {
                        houseInformation,
                        houseInformationDetails
                    }
                    addHouseInformation(submitStructural).then(res =>{
                        this.$message.success('添加成功')
                        this.loading.addHouseInformation = false
                        this.$emit('addSuccess')
                    }).catch(() =>{
                        this.loading.addHouseInformation = false
                    })

                }else{
                    this.loading.addHouseInformation = false
                }
            })
        },
        checkHouseDetail(tip){
            let data = this.arrayManagement.houseArray.data
            let index = 0
            for(let item of data){
                if(item.housePosition.trim() === ''){
                    this.$message.warning(tip + '错误行定位：【' + (index + 1) + '】')
                    return false
                }
                index++
            }
            return true
        },
        initData(){
            this.addHouseInformation= {
                code: '',
                name: '',
                sfz: '',
                proveDatetime: this.$util.fetchCurrentTime()
            }
            this.arrayManagement.houseArray.data = []
        }
    }
}
</script>
